import React from "react";
import {
  Input,
  InputGroup,
  InputLeftAddon,
  Button,
  FormControl,
  FormErrorMessage,
  useToast
} from "@chakra-ui/react";
import { LockIcon, EmailIcon,QuestionIcon  } from "@chakra-ui/icons";
import { Formik, Form, Field} from "formik"
import * as Yup from "yup"
import { signUp } from "../../api/user"

export default function SignUp() {
    const toast = useToast()
    const schema = Yup.object({
        username:Yup.string().required('请输入用户名').max(15, '用户名最多15位'),
        email:Yup.string().required('请输入邮箱').email('邮箱格式有误'),
        password:Yup.string().required('请输入密码').min(8, '密码最少8位').max(20, '密码最多20位'),
    })
    function toastModal ({title, description, status}, actions) {
        toast({
            title,
            description,
            status,
            duration: 1000,
            isClosable: true,
            position: "top",
          })
          actions.setSubmitting(false)
    }
    return (
      <Formik
        initialValues={{ username: "", email:'', password:"" }}
        onSubmit={(values, actions) => {
            signUp(values).then(res => {
            console.log(res, 'success')
            toastModal({
                title:'提示', 
                description:'注册成功', 
                status:'success'
              }, actions)
          }).catch(err => {
              let errors = err.response.data.errors;
              let JSX = [];
              for (let key in errors) {
                errors[key].forEach(message => {
                    JSX.push(<li key={Math.random() * Math.random()}>{key} {message} </li>)
                    
                })
              }
              toastModal({
                title:'错误提示', 
                description:<ul>{JSX}</ul>, 
                status:'error'
              }, actions)
          })
        
            
        }}
        validationSchema={schema}
      >
        {(props) => (
          <Form>
            <Field name="username">
              {({ field, form }) => (
                <FormControl isInvalid={form.errors.username && form.touched.username}>
                    <InputGroup borderColor=" #c8c8c8" p="4px 12px 4px 0px">
                        <InputLeftAddon children={<QuestionIcon color="#969696"/>} h="50px"/>
                        <Input {...field} id="username" placeholder="请输入用户名" h="50px"/>
                    </InputGroup>
                  <FormErrorMessage>{form.errors.username}</FormErrorMessage>
                </FormControl>
              )}
            </Field>
            <Field name="email">
              {({ field, form }) => (
                <FormControl isInvalid={form.errors.email && form.touched.email}>
                    <InputGroup borderColor=" #c8c8c8" p="4px 12px 4px 0px">
                        <InputLeftAddon children={<EmailIcon color="#969696"/>} h="50px"/>
                        <Input {...field} id="email" placeholder="请输入邮箱" h="50px"/>
                    </InputGroup>
                  <FormErrorMessage>{form.errors.email}</FormErrorMessage>
                </FormControl>
              )}
            </Field>
            <Field name="password">
              {({ field, form }) => (
                <FormControl isInvalid={form.errors.password && form.touched.password}>
                    <InputGroup borderColor=" #c8c8c8" p="4px 12px 4px 0px">
                        <InputLeftAddon children={<LockIcon color="#969696"/>} h="50px"/>
                        <Input {...field} id="password" type="password" placeholder="请输入密码" h="50px"/>
                    </InputGroup>
                  <FormErrorMessage>{form.errors.password}</FormErrorMessage>
                </FormControl>
              )}
            </Field>
            <Button
              mt={4}
              borderRadius="1.25rem"
              h="2.5rem"
              bg="#42c02e"
              fontSize="18px"
              colorScheme="teal"
              isLoading={props.isSubmitting}
              type="submit"
              w="100%" 
              _hover={{ bgColor: "tomato" }}
            >
              注册
            </Button>
          </Form>
        )}

       
      </Formik>
    )
  }